//这是卡片组件,大部分是modal框打开后里面的内容。左边头像，右边内容。内容里面主要以列表形式展示
import React,{Component} from 'react';
import {Modal} from 'antd'
import './card.css'
import image from '../../Picture/daili_normal.png'

class Card extends Component{
     state={
        visible:false,
        previewImage:'',
        item:this.props.item
    }
    modalimage=(file)=>{         //点击图片打开大图
        this.setState({
            previewImage:file.target.src,
            visible:true
        })
    }
    handlesmallCancel=()=>{   //modal取消函数
        this.setState({
            visible:false
        })
    }

    modaltitle=(obj,item)=>{          //卡片左边title
        if(item == 1){
            return(
                <ul style={{marginLeft:'30px',flex:'1'}}>
                    <li >代理名称</li>
                    <li >手机号</li>
                    <li >代理编号</li>  
                    <li >类型</li>  
                    <li >状态</li> 
                    <li>头像</li> 
                </ul>
            )
        }
        if(item == 2){
            return(
                <ul style={{marginLeft:'30px',flex:'1'}}>
                    <li >开卡人姓名</li>
                    <li >开卡人银行</li>
                    <li >开卡人银行号</li>  
                </ul>
            )
                
        }
        if(item == 3){
            return(
                 <ul style={{marginLeft:'30px',flex:'1'}}>
                    <li>签约区域</li>
                    <li>签约人</li>
                    <li>付费记录</li>  
                    <li>签约备注</li>  
                    <li>合同编号</li>  
                    <li  style={{position:"relative"}}>
                        <div style={{display:'flex'}}>{/* 头像  = obj.avatar */}
                            {/* <img style={{position:'absolute',width:'60px',backgroundColor:'blue',cursor:'pointer',marginLeft:'10px'}} src={image} alt="" onClick={this.modalimage}/> */}
                           
                            {obj?obj.contract_picture.map((item)=>{
                                return(
                                    <img style={{width:'60px',height:'60px',backgroundColor:'blue',cursor:'pointer',marginLeft:'10px'}} src={item} alt="" onClick={this.modalimage}/> 
                                )
                            }):false}
                        </div>
                      
                    </li>
                </ul>
            )
        }
        if(item == 4){
            return(
                 <ul style={{marginLeft:'30px',flex:'1'}}>
                    <li>付款方式</li>
                    <li>付款金额</li>
                    <li>付款类型</li>   
                    <li>结算人</li> 
                    <li>审核人</li> 
                </ul>
            )
        }
    }

    modalcontent=(obj,item)=>{    //卡片右边内容
        if(item == 1){
            return(
                <ul style={{flex:"2"}}>
                    <li>{obj.name}</li>
                    <li>{obj.mobile}</li>
                    <li>{obj.identifier}</li>  
                    <li>{obj.type ==1 ?'企业代理':'个人代理'}</li>  
                    <li>{obj.status == 1?"启用":"禁用"}-{obj.normal ==1?"已转正":"未转正"}</li> 
                    <li>
                       <img style={{width:'60px',backgroundColor:'blue',cursor:'pointer'}} src={image} alt="" onClick={this.modalimage}/>    {/* 头像  = obj.avatar */}
                    </li>
                </ul>
            )
        }
        if(item == 2){
            return(
                <ul style={{flex:"2"}}>
                    <li>{obj.cash_name}</li>
                    <li>{obj.cash_bank}</li>
                    <li>{obj.cash_card}</li>  
                    
                </ul>
            )
        }
        if(item == 3){
            return(
                <ul style={{flex:"2"}}>
                    <li>{obj.province.name}>{obj.city.name}</li>
                    <li>{obj.signatory}</li>
                    {this.props.oldpayson ? false:<li><span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={()=>this.props.payson(this.props.modaldata)}>查看详情</span></li>   }
                    <li>{obj.remark}</li>   
                    <li>{obj.contract_no}</li>   
                    
                </ul>
            )
        }
        if(item == 4){
            let paymen = obj.payment_mode ==1 ? "免费": (obj.payment_mode ==2 ?"全款":(obj.payment_mode == 3?"部分付款" :(obj.payment_mode == 4?"结清":false)))
            let paymen_money = obj.payment_mode ==3?('付款'+obj.payment_part+'元，收益达到'+obj.payment_profit+'元时，支付剩余的'+obj.payment_surplus+'元'):obj.payment_total
            return(
                <ul style={{flex:"2"}}>
                    <li>{paymen}</li>
                    <li>{paymen_money}</li>
                    <li>{obj.payment_type ==1?"正常付款":"定金"}</li>
                    <li>{obj.settlement_man}</li>
                    <li>{obj.examine_man}</li>
                
                </ul>
            )
        }
    }
    render(){
        let children = this.modaltitle(this.props.modaldata,this.props.item)
        let oldchildren = this.modalcontent(this.props.modaldata,this.props.item) 
        // console.log(this.props.modaldata)
        return(
            <div className="card_box">
                <div className="card_box_head" id={this.props.id}>
                    {this.props.head}
                </div>
                <div className="card_box_content">
                    <div className="card_content_triangle"></div>
                    <div className="card_content_left"> 
                            {children}
                        
                            {oldchildren}
                    </div>
                </div>
                <div>
                    <Modal visible={this.state.visible} footer={null} onCancel={this.handlesmallCancel} maskClosable={false}>        {/*点击图片打开的大图详情 */}
                        <img alt="" style={{ width: '100%',backgroundColor:'blue' }} src={this.state.previewImage} />
                    </Modal>
                </div>
            </div>
        )
    }
}
export default Card